// 发送异步请求文件 vue路由跳转及其ajax请求,Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转...
import router from './router' // 导入路由
// Vuex的状态存储是响应式的。当Vue 组件从 Store 中读取状态的时候，若 Store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
// 不能直接改变 Store 中的状态。改变Store 中的状态的唯一途径就是显式地提交 mutation。
import store from '@/store' // 导入vuex
// 导入页面顶部加载进度条，在前端开发中进度条只是装饰，不具备实际加载参考
import NProgress from 'nprogress'
// 进度条样式
import 'nprogress/nprogress.css'
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // 进度条配置
// 创建一个数组用于存放页面合集
const whiteList = ['/login', '/404'] // 白名单：不需要登录就可以直接访问的页面集合

// 前置路由守卫获取网页标题
router.beforeEach(async(to, from, next) => {
  // console.log(to)
  // document.title = to.meta.title + 'qqqq系统'
  document.title = getPageTitle(to.meta.title)
  next()
})

// 全局前置路由守卫
router.beforeEach(async(to, from, next) => {
  // console.log('从此处跳转', to, from, next)
  // console.log('路由跳转，一定会经过这里', to, store)
  // 开始进度条
  // console.log(store.state.user) // 路由中的state数据里的user信息
  NProgress.start()
  // 1.如果有token&&去登录页===>让它去主顶
  // 2.如果没有token&&去的不是登录===>去登录页
  // token有登录  !token无登录
  const token = store.state.user.token
  // 当已存在token数据后且用户逍遥进入的网页路径为/login时，将自动跳转至非登录界面(只有将token失效或退出登录时才能进入/login)
  if (token && to.path === '/login') {
    // console.log('有了token，login页面就不能访问')
    next('/')
  } else if (!token && whiteList.includes(to.path) === false) {
    // console.log('没有登录，就只能访问login')
    next('/login')
    // 结束进度条
    NProgress.done()
  } else {
    // 调用action，获取用户个人信息，保存到vuex
    // await store.dispatch('user/getUserInfo')
    // dispatch执行、调度，如果userID和用户token令牌都为false(空)时，直接更新数据至本地存储文件user的getUserInfo方法中
    if (!store.state.user.userInfo.userId && token) {
      await store.dispatch('user/getUserInfo')
    }
    next()
  }
}
)
router.afterEach(() => {
  // 结束进度条
  NProgress.done()
})
